웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
요즘 대세인 가장 인기있는 프렘워크 중 하나... 바로 프론트엔드 프레임워크인 VueJS !!! 아래는 VueJS를 사용하여 앱을 만드는 과정을 함께 배워봅니다. 천천히 알아보시기 바랍니다.
! Why VueJS?
VueJS가 다란 프레임워크가 다른 점과 장단점은 아래 링크에서 참조하시기 바랍니다. 여기서는 좀 더 실전적인 부분을 다루어보려합니다.링크 바로가기 >
https://webisfree.com/2018-07-28/요즘-뜨는-vuejs-알아보기
# VueJS를 사용하여 앱 만들기
먼저 view에 해당하는 template를 알아봅니다. 템플릿은 웹의 html에 해당하는 부분이라고 생각하시면 됩니다. vuejs로 동작하기 위해서 앱이 동작할 엘리먼트를 정해야하는데 아래 예제는 id값 app을 사용하였습니다.(참고로 html, body 태그에 직접 vuejs 엘리먼트를 설정하는 방법은 가급적 자제해주시기 바랍니다.)
! vuejs 에 스크립트 추가하기
vuejs 스크립트를 앱에서 불러와야겠죠. 아래와 같이 적용하였습니다.<script src="vue.js"></script>
참고로 vue.js는 크게 버전 2와 아닌 버전으로 구분 할 수 있습니다. 가급적 최신버전을 사용하는 것이 성능이나 기능 측면에서 좋으니 참고하세요.2019년 1월 기준으로 vuejs 2를 사용하시는게 좋습니다.
@ myApp.vue
<div id="app">
{{ appName }}
</div>
{{ appName }}
</div>
위 코드의 모습이 바로 vuejs 템플릿의 모습입니다. 이제 스크립트를 사용하여 엘리먼트에 vuejs 적용하고 새로운 인스턴스를 생성해보겠습니다.
var app = new Vue({
el: '#app',
data: function() {
return {
appName: 'My VueJS'
}
}
});
el: '#app',
data: function() {
return {
appName: 'My VueJS'
}
}
});
여기서 new Vue() 내부의 객체를 옵션객체라고합니다. 인스턴스의 만드는 여러 옵션을 설정한다고 생각하시면 됩니다. 이제 위 코드를 브리우저에서 실행하면 아래와 같은 앱을 확인하실 수 있습니다.
My VueJS
이제 VueJS를 사용한 간단한 앱을 만들어 보았습니다. 위 앱이 어떻게 동작하게 되었는지 나누어 설명해보겠습니다.
! el, data 프로퍼티의 설정
VueJS에서는 여러가지 프로퍼티가 사용되는데 이 프로퍼티는 매우 기본적이면서 꼭 필요한 부분입니다. 차례대로 보면... 위 코드를 아래와 같이 el 코드, 프로퍼티가 존재합니다.el: '#app',
먼저 el은 앱이 동작하게 될 엘리먼트를 의미합니다. 그리고 # 기호는 선택자 방식으로 id값을 불러올 때 사용됩니다. 클래스라면 .이 되겠죠~! 이제 앱은 #app 위에 동작하게 됩니다.
data: function() {
return {
appName: 'My VueJS'
}
}
return {
appName: 'My VueJS'
}
}
이 코드를 보면 data 프로퍼티가 있는데 VueJS라는 스코프 범위(전역이 아닌 앱 내부의 범위)에서 사용할 변수.. 즉 데이터를 설정하는 부분입니다. 이때 함수를 사용하여 return하는 부분이 다른 프로퍼티와의 차이입니다. 이처럼 appName이라는 새로운 변수를 설정하고 값을 추가하였죠.
{{ appName }}
이 부분은 View에 출력하는 방법으로 표현식이라고 합니다. 다른 언어에서도 같은 방법으로 많이 사용되죠.
여기까지 VueJS를 사용하여 간단한 앱을 만들어 보았습니다. 다음 번에는 좀 더 어려운 부분을 배워보겠습니다. 위 내용을 에디터를 사용하여 적용하고 브라우저에 실행 빛 출력해보는 것이 좋습니다. 그래야 빨리 배우고 기억할 수 있죠.
아래의 글도 찾고 계시지 않나요?
